import "./jszxtest.scss"
import PropTypes from 'prop-types'
import { lazy, Suspense, useState } from 'react'
import { useTitle, useFavicon, useExternal } from 'ahooks'
import { SingleA01, AccountSecretA01, ScanCodeA01, PlugInUnit } from '../../Utils/SignUp'

const LoadSvg = lazy(() => import('../../Views/LoadSvg'))

const JSZXTESTLogin = ({ config }) => {
    JSZXTESTLogin.propTypes = { config: PropTypes.object }
    const { imageUrl, fullName, isScan } = config
    useTitle(fullName)
    useFavicon(imageUrl + 'Ico.ico')
    const [Active, setActive] = useState(true)
    useExternal(isScan && 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js')
    return (
        <Suspense fallback={<LoadSvg />}>
            <div className="LoginPage TestLogin">
                <img className="LoginBac" src={`${imageUrl}LoginBack.png`} alt="" />
                <div className="SignBox">
                    <img className="signBack" src={`${imageUrl}SignBack.png`} alt="" />
                    <div className="Box">
                        <div className="left">
                            <div className="title">{fullName}</div>
                            <LoadSvg style={{ '--background': 'transparent', '--stroke': '#fff', height: '320px' }} />
                        </div>
                        <div className="right">
                            <div className="title">welcome</div>
                            {isScan ? <SingleA01 active={Active} toggle={setActive} /> : ''}
                            {Active ? <AccountSecretA01 config={config} /> : <ScanCodeA01 />}
                            <PlugInUnit />
                        </div>
                    </div>

                </div>
            </div>
        </Suspense>
    )
}

export default JSZXTESTLogin